<template>
	<view class="zbpage">
		<view class="topimg">
			<image src="https://changban.dianjingkeji.net/img/banner-1-拷贝_1.jpg" mode=""></image>
		</view>
		<view class="banner">
			<view class="bannertitle">
				权益内容
			</view>
	<!-- 		<view class="bannerbox">
				<view class="itembanner">
					<view class="yuan">
						<view class="iconfont icon-caidan1">
							
						</view>
						
					</view>
					<view class="bannername">
						设备检测
					</view>
				</view>
				<view class="itembanner">
					<view class="yuan">
						<view class="iconfont icon-tuandui">
							
						</view>
						
					</view>
					<view class="bannername">
						团队服务
					</view>
				</view>
				<view class="itembanner">
					<view class="yuan">
						<view class="iconfont icon-hangyezhishiku">
							
						</view>
						
					</view>
					<view class="bannername">
						数据分析
					</view>
				</view>
				<view class="itembanner">
					<view class="yuan">
						<view class="iconfont icon-jishiben">
							
						</view>
						
					</view>
					<view class="bannername">
						治疗方案
					</view>
				</view>
			</view> -->
		</view>
		<view class="itemlist" v-for="item in list" :key="item.id">
			<view class="itemline">
				<view class="itemleft">
					<view class="iconfont icon-xindong1">
						
					</view>
					<view class="itemname">
						{{item.mzPackageName}}
					</view>
				</view>
				<view class="itemright">
					￥{{item.mzPrice}}/{{item.mzPackageName=='月度服务'?'月':item.mzPackageName=='季度服务'?'季':'年'}}
				</view>
			</view>
			<view class="content">
				{{item.mzDescription}}
			</view>
			<view class="btnline">
				<view class="btn" @click="paypackitem(item)">
					立即购买
				</view>
			</view>
		</view>
	
	
	</view>
</template>

<script>
	import {packageList,orderUploadPay} from '../../utils/api.js'
	export default {
		data() {
			return {
				list:[
					
				],
				did:''
			}
		},
		onLoad(e) {
			this.did=e.id
		},
		onShow() {
			let p={
				mzType:1
			}
			packageList(p).then(res=>{
				console.log(res)
				this.list=res.data.data
			})
		},
		methods: {
			paypackitem(e){
				console.log(e,'下单')
				let p={
					phone:uni.getStorageSync('phone'),
					packageId:e.id,
					hdId:this.did
				}
				orderUploadPay(p).then(res=>{
					console.log(res,'')
					uni.requestPayment({
					          provider: 'wxpay',
					          timeStamp: res.data.data.payInfo.timeStamp,
					          nonceStr: res.data.data.payInfo.nonceStr,
					          package: res.data.data.payInfo.package,
					          signType: res.data.data.payInfo.signType,
					          paySign: res.data.data.payInfo.paySign,
					          success: function (res) {
					            uni.showToast({ title: '支付成功', icon: 'success' })
					            // 支付成功后，跳转或刷新订单状态
					          },
					          fail: function (err) {
					            console.log('支付失败', err)
					            uni.showToast({ title: '支付取消', icon: 'none' })
					          },
					    
					        })
					      
				})
				
				    
			},
		}
	}
</script>

<style lang="less" scoped>
   .zbpage{
	   width: 750rpx;
	   box-sizing: border-box;
	   padding: 20rpx;
	 background: linear-gradient(180deg, rgba(242,248,255,1) 0%,rgba(242,242,242,1) 76%);
	   .topimg{
		   width: 100%;
		   height: 300rpx;
		   border-radius: 30rpx;
		   image{
			   width: 100%;
			   height: 100%;
			     border-radius: 30rpx;
		   }
	   }
	   .banner{
		   width: 100%;
		   margin-top: 30rpx;
		   background: white;
		   padding: 30rpx 10rpx;
		  .bannertitle{
			  border-left: 6rpx solid #1a4f8a;
			  padding-left: 30rpx;
			  font-weight: bold;
			  height: 30rpx;
			  line-height: 30rpx;
		  }
		  .bannerbox{
			  display: flex;
			    margin-top: 30rpx;
			  align-items: center;
			  justify-content: space-evenly;
			  .itembanner{
				  text-align: center;
				  font-size: 28rpx;
				 .yuan{
				 	 margin: auto;
					 width: 100rpx;
					 height: 100rpx;
					 border-radius: 50%;
					 line-height: 100rpx;
					 background-color: #F3F5FF;
					 .iconfont{
						 margin: auto;
						 font-size: 40rpx;
						 color: #1A4F8A;
					 }
				 } 
				 .bannername{
					 font-weight: bold;
				 }
			  }
		  }
	   }
	   .itemlist{
		   width: 100%;
		   background-color: white;
		   box-sizing: border-box;
		   padding: 20rpx;
		   margin-top: 30rpx;
		   border-radius: 20rpx;
		   .itemline{
			   display: flex;
			   align-items: center;
			   justify-content: space-between;
			   font-weight: bold;
			   line-height: 2.3;
			   .itemleft{
				   display: flex;
				   align-items: center;
				   font-size: 30rpx;
				   .iconfont{
					   color: #1A4F8A;
					   font-weight: 700;
					   margin-right: 20rpx;
				   }
			   }
			   .itemright{
				   font-size: 28rpx;
				   color: orange;
			   }
		   }
		   .content{
			   font-size: 28rpx;
		   }
		   .btnline{
			   width: 100%;
			   display: flex;
			   align-items: center;
			   justify-content: flex-end;
			   .btn{
				   width: 200rpx;
				   height: 70rpx;
				   border-radius: 20rpx;
				   font-size: 30rpx;
				   color: #1A4F8A;
				   background: rgba(242,248,255,1);
				   text-align: center;
				   line-height: 70rpx;
				   font-weight: bold;
				   
			   }
		   }
	   }
   }
</style>
